<template>
  <div class="nodata" v-if="!list.length">
    <template v-if="search_empty">
      <img
        src="~assets/images/defaultGraph/bg_empty.png"
        alt
        class="nodataimg"
      />
      <div class="van-list__error-text">暂无搜索内容</div>
    </template>
    <template v-else-if="!list.length">
      <img src="~assets/images/defaultGraph/none.png" alt class="nodataimg" />
      <div class="van-list__error-text">暂无信息</div>
    </template>
  </div>
  <div class="nodata" v-else>
    <div class="van-list__error-text">{{ noMoreText }}</div>
  </div>
</template>

<script>
/***
 * @description 搜索显示不同的缺省图
 * @param list  搜索到的列表个数
 * @param searchValue 筛选条件/搜索内容
 */
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    searchValue: {
      type: String,
      default: ''
    },
    noMoreText: {
      type: String,
      default: '没有更多了'
    }
  },
  computed: {
    search_empty: function () {
      if (this.searchValue) {
        return true
      }
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.nodata {
  width: 100%;
  text-align: center;
  font-size: 16px;
  .nodataimg {
    width: 200px;
    max-width: 90%;
    margin-top: 10%;
    // margin-bottom: 10%;
  }
  img {
    width: 200px;
  }
}
</style>
